<template>
  <div class="flex w-100% h-100%">
      <div class="flex justify-center items-center">
        <ElInput
            v-model="dictionaryBasicTreeQueryKey"
            placeholder="搜索字典"
            clearable
        />
      </div>
      <ElDivider />
      <ElTree
          ref="treeEl"
          :data="dictionaryBasicTree"
          default-expand-all
          :expand-on-click-node="false"
          node-key="id"
          :current-node-key="currentNodeKey"
          :props="{
            // label: 'dictionaryName'
            label: treeLabel
          }"
          :filter-node-method="filterNode"
      >
      </ElTree>
   

    <EditDict
        ref="EditDictRef"
    ></EditDict>

  </div>
</template>




<script setup lang="ts">
import EditDict from './components/edit-dict.vue'
import { ref, unref, nextTick, watch, reactive } from 'vue'
import { ElTree, ElInput, ElDivider } from 'element-plus'
import { getDictionaryBasicTreeApi } from '@/api/system/dict'
import { DictionaryBasicTree } from '@/api/system/dict/types'


const treeEl = ref<InstanceType<typeof ElTree>>()

const currentNodeKey = ref('')
const dictionaryBasicTree = ref<DictionaryBasicTree[]>([])
const initTree = async () => {
  const res = await getDictionaryBasicTreeApi()
  dictionaryBasicTree.value = res.data
  currentNodeKey.value =
    (dictionaryBasicTree.value[0] && dictionaryBasicTree.value[0]?.children && dictionaryBasicTree.value[0].children[0].id) || ''
  await nextTick()
  unref(treeEl)?.setCurrentKey(currentNodeKey.value)
}
initTree()

const dictionaryBasicTreeQueryKey = ref('')
watch(
  () => dictionaryBasicTreeQueryKey.value,
  (val) => {
    unref(treeEl)!.filter(val)
  }
)
 
let treeLabel = (data: DictionaryBasicTree) => {
  return data.dictionaryName + " " + data.dictionaryCode;
}


const filterNode = (value: string, data: DictionaryBasicTree) => {
  if (!value) return true
  return data.dictionaryName.includes(value) || data.dictionaryCode.includes(value)
}




</script>

